﻿@model Jinshiyu.Models.OrderViewModel
@{
    ViewBag.Title = "立刻洗车";
    Layout = "~/Views/Shared/_LayoutOder.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.DOMWindow.js")" type="text/javascript"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
    rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=zh-CN"
    type="text/javascript"></script>
<script type="text/javascript">
    //第一段，全局变量声明
    var map;
    var geocoder = new google.maps.Geocoder();
    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        cursor: "hand",
        draggable: true,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(@Model.Latitude, @Model.Longitude)
    });

    //第二段，初始化函数
    function initialize() {
        var mapOptions = {
            draggableCursor: "pointer",
            center: new google.maps.LatLng(@Model.Latitude, @Model.Longitude),
            zoom: @Model.地图级数,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true,
            mapTypeControl: false
        };
        map = new google.maps.Map(document.getElementById('myMap'), mapOptions);

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo('bounds', map);

        var marker1 = new google.maps.Marker({
            map: map
        });

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var input = document.getElementById('searchTextField');
            findAddr();
        });

        //为鼠标单击事件设置一个listener，捕捉经纬度,并获取地址
        google.maps.event.addListener(map, 'click', function (event) {
            codeLatLng(event.latLng);
        });
        //为鼠标拖拽marker设置监听
        google.maps.event.addListener(marker, 'mouseup', function (event) {
            codeLatLng(event.latLng);
        });

        //设置默认的洗车类型和金额
        var x = document.getElementById("washtype");
        var y = x.options[x.selectedIndex].value.split("|");
        document.getElementsByName('洗车类型')[0].value=y[0];
        document.getElementsByName('金额')[0].value=y[1];
    }


    //第三段，改变洗车类型时自动选择金额
    function changeSelected(){
        var x = document.getElementById("washtype");
        var y = x.options[x.selectedIndex].value.split("|");
        document.getElementsByName('洗车类型')[0].value=y[0];
        document.getElementsByName('金额')[0].value=y[1];
    }


    //第四段
    function codeLatLng(location) {
        geocoder.geocode({ 'latLng': location }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    marker.setPosition(location);
                    marker.setMap(map);
                    infowindow.setContent(results[0].formatted_address);
                    infowindow.open(map, marker);
                    document.getElementById('Longitude').value = location.lng().toFixed(6);
                    document.getElementById("Latitude").value = location.lat().toFixed(6);
                    document.getElementById('Address').value = results[0].formatted_address;
                    document.getElementsByName('地图级数')[0].value = map.getZoom();
                } else {
                    alert("没有找到结果");
                }
            } else {
                alert("Geocoder failed due to: " + status);
            }
        });
    }

    //第五段
    google.maps.event.addDomListener(window, 'load', initialize);

    //第六段 geocoder.geocode 搜索
    function findAddr() {
        var input = document.getElementById('searchTextField');
        geocoder.geocode({ 'address': input.value }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker.setPosition(results[0].geometry.location);
                marker.setMap(map);
                document.getElementById("Longitude").value = parseFloat(results[0].geometry.location.lng()).toFixed(6);
                document.getElementById("Latitude").value = parseFloat(results[0].geometry.location.lat()).toFixed(6);
                geocoder.geocode({ 'latLng': results[0].geometry.location }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            document.getElementById('Address').value = results[0].formatted_address;
                        } else {
                            alert("没有找到 !");
                        }
                    } else {
                        alert("Geocoder failed due to: " + status);
                    }
                });
            } else {
                alert("没有找到 !");
            }
        });
    }



</script>
<div id="订单左栏">
    <div id="订单左栏标题">
        <p class="栏目标题中">
            填写您的订单</p> 
    </div>
    <div id="订单左栏内容">
        @using (Html.BeginForm())
        {
            @Html.ValidationSummary(true)
            <fieldset style="border: 0; margin: 0;">
                <div style="visibility: hidden; height: 0;">
                    @Html.EditorFor(model => model.账户)
                    @Html.EditorFor(model => model.地图级数)
                    @Html.EditorFor(model => model.洗车类型)
                    @Html.EditorFor(model => model.起始时)
                    @Html.EditorFor(model => model.结束时)
                </div>
                <table style="width: 100%; border: 0; margin: 0; line-height: 25px;">
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.账户)：
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.DisplayFor(model => model.账户)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.Address)：<div class="报错必填">@Html.ValidationMessageFor(model => model.Address)</div>
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.TextAreaFor(model => model.Address, 1, 23, new { })
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.Longitude)：
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.EditorFor(model => model.Longitude, "Longitude")
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.Latitude)：
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.EditorFor(model => model.Latitude, "Latitude")
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.车牌号)：
                                <div class="报错必填">
                                    @Html.ValidationMessageFor(model => model.车牌号)
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.车牌号, new { @class = "editor-label" })
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.车型)：<div class="报错必填">
                                    @Html.ValidationMessageFor(model => model.车型)
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.车型, new { @class = "editor-label" })
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.颜色)：
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.DropDownListFor(model => model.颜色, (List<SelectListItem>)ViewData["color"], new { @class = "editor-label" })
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.洗车类型)：
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.DropDownList("washtype", (List<SelectListItem>)ViewData["typelist"], new { @class = "editor-label", onchange = "changeSelected()" })
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.发票)：
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.CheckBoxFor(model => model.发票)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                @Html.LabelFor(model => model.Scratch)：
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.EditorFor(model => model.Scratch)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                               洗车日期： 
                            </div>
                        </td>
                        <td><div id="时间位置"></div>@Html.EditorFor(model => model.预约时间1)  </td> 
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                预约时间：
                            </div>
                        </td>
                        <td>
                            <div id="预约时间">
                                @Html.Editor("", "HourRange")
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label" style="text-align: right;">
                                 @Html.LabelFor(model => model.金额)：
                            </div>
                        </td>
                        <td>
                            <div class="editor-field">
                                @Html.EditorFor(model => model.金额, "Money") 元
                            </div>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <div>
            <!--<input id="getAddr" type="button" class="按钮样式LJ"  value="常用地址" />-->
            </div>
            <input id="提交订单按钮" class="按钮样式LJ" type="submit" value="提交订单" />
        }
    </div>
</div>
<div id="订单右栏">
    <div id="订单右栏标题">
        <p class="栏目标题">
            地址搜索
            <input style="vertical-align: baseline; font-size: 12px; margin-left: 55px; margin-top: 1px;
                height: 16px; width: 660px;" id="searchTextField" type="text" size="100" />
            <button id="find" style="margin-top: 2px; padding: 0px; text-align: center; vertical-align: top;
                height: 23px; width: 50px; font-size: 12px; top: 0px; font-family: 宋体; color: #000000;
                line-height: normal;" title="搜索" onclick="findAddr()">
                搜索</button></p>
    </div>
    <div id="订单右栏内容">
        <div id="myMap" style="height: 522px;">
        </div>
    </div>
</div>


<!--
<p><a href="#example9Content" class="example9DOMWindow">Open DOM Window</a></p> 
<p><a href="#example9aContent" class="example9aDOMWindow">Open DOM Window</a></p> 

<div id="example9Content" style="display: none;"> 
<a id="addr1"></a>
<p><a href="#" class="closeDOMWindow">close</a></p> 
</div>
-->

<script type="text/javascript">
    $(function () {

        $("#addr1").click(function () {
            // alert($("#addr1").attr("addr"));
            $("textarea#Address").val($("#addr1").attr("addr"));
            // $("textarea#Address").val("test..");
        });



        $(document).ready(function () {
            $.ajax({
                url: '/Address/GetAddrList/53',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    // get the result and do some magic with it
                    //var message = data.Title;
                    //var option = '<option value="' + data.ID + '">' + data.Title + '</option>';
                    //$('#movies').append(option);
                    /*
                    $.each(data, function (i, item) {
                    var option = '<option value="' + item.ID + '">' + item.Title + '</option>';
                    $('#movies').append(option);
                    });
                    */
                    $('#addr1').html(data[1].地址);
                    $('#addr1').attr('addr', data[1].地址);
                    var addlayer = $('#example9Content');
                    //var addrcount = 0;
                    //var addr = '<a id="addr' + addrcount + '"></a>';
                    $('#addr1').clone().attr('id', 'addr2').insertAfter($('#addr1'));
                }
            });
        });
    });

    /*
    var jxhr = $.ajax({ url: "/movies/getMovie/1" })
    .success(function (data) { alert(data.Title); $("#resultMessage").html(data.Title); })
    .error(function () { alert("error"); })
    .complete(function () { alert("complete"); }); 
    */

    $('.example9DOMWindow').click(function () {
        $.openDOMWindow({
            windowSourceID: '#example9Content',
            height: 220,
            width: 320,
            overlay: 0,
            positionType: 'anchoredSingleWindow',
            windowPadding: 20,
            windowBGColor: '#ccc',
            borderSize: '0',
            anchoredSelector: '.example9DOMWindow',
            positionLeft: 120,
            positionTop: -150
        });
        return false;
    });
    $('.example9aDOMWindow').click(function () {
        $.openDOMWindow({
            windowSourceID: '#example9Content',
            height: 220,
            width: 320,
            overlay: 0,
            positionType: 'anchoredSingleWindow',
            windowPadding: 20,
            windowBGColor: '#ccc',
            borderSize: '0',
            anchoredSelector: '.example9aDOMWindow',
            positionLeft: 120,
            positionTop: -150
        });
        return false;
    }); 
</script>